<template>
	<view class="boxes" :class="themeName">
		<view class="flex row-between bg box md">
			<view>门店名称</view>
			<input v-model="name" placeholder="请输入门店名称" type="text" />
		</view>
		<view class="flex row-between bg box md">
			<view>联系人</view>
			<input v-model="contact" placeholder="请输入门店联系人" type="text" />
		</view>
		<view class="flex row-between bg box md">
			<view>联系电话</view>
			<input v-model="mobile" placeholder="请输入联系电话" type="number" />
		</view>
		<view class="flex row-between bg box md">
			<view>定价(分钟单价)</view>
			<input v-model="price" placeholder="请输入每分钟的价格" type="number" />
		</view>
		<view class="flex row-between bg box md">
			<view>分成比例</view>
			<input v-model="bili" placeholder="请输入比例(0-1),如0.1" type="text" />
		</view>
		<view class="flex row-between bg box md" @click="showRegion = true">
			<view>省/市/区</view>
			<input name="region" v-model="region" disabled type="text" placeholder="请选择省、市、区"></input>
		</view>
		<u-picker
			v-model="showRegion"
			:confirm-color="themeColor"
			cancel-color="#999"
			mode="region"
			@confirm="regionChange"
		>
		</u-picker>
		<view class="flex row-between bg box md" @click="getaddress">
			<view>详细地址</view>
			<input v-model="address" disabled placeholder="请输入详细地址" type="text" />
		</view>
		<view class="bg box bordernone md">
			<view>门店logo</view>
			<image @click="uploadFile" class="addimg m-t-30" :src="imgs" mode=""></image>
		</view>
		<view @click="submit" class="other-button" hover-class="other-button-hover">更新门店信息</view>
	</view>
</template>

<script>
	import { baseimgURL } from "@/config/app";
	import {
		uploadFile
	} from '@/utils/tools';
	import {
	    shopInfoDetail,updateShop
	} from '@/api/others';
export default {
	data() {
		return {
			id:'',
			sn:'',
			name:'',//门店名称
			contact:'',//联系人
			mobile:'',//联系电话
			price:'',//单价
			bili:'',//比例
			province:'',
			city:'',
			district:'',
			region: '',         //省市区显示
			address:'',
			longitude:'',
			latitude:'',
			showRegion:false,
			imgs:'../../static/add.png'
		};
	},
	async onLoad(options) {
		this.id = options.id;
		await this.getdetail();
	},
	methods: {
		getdetail(){
			shopInfoDetail({id:this.id}).then(res => {
				this.name = res.name;
				this.contact = res.contact;
				this.mobile = res.mobile;
				this.price = res.price;
				this.bili = res.bili;
				this.province = res.province;
				this.city = res.city;
				this.district = res.district;
				this.region = res.province_name  + " " +  res.city_name  + " " +  res.district_name;
				this.address = res.address;
				this.longitude = res.longitude;
				this.latitude = res.latitude;
				this.imgs = res.image2;
				
			});
		},
		// 地区选择，选择当前省市区的ID
		regionChange(region) {
			console.log(region)
			const { city, province, area } = region;
		    this.province = province.value;
		    this.city = city.value;
		    this.district = area.value;
		    this.region = province.label + " " + city.label + " " + area.label
		},
		// 选择详细地址
		getaddress(){
			let that = this;
			uni.chooseLocation({
				success: function (res) {
					that.address = res.address;
					that.longitude = res.longitude;
					that.latitude = res.latitude;
					// console.log('详细地址：' + res.address);
					// console.log('纬度：' + res.latitude);
					// console.log('经度：' + res.longitude);
				}
			});
		},
		// 上传图片
		async uploadFile() {
			const [error, success] = await uni.chooseImage({
				count: 1
			})
			if (error) {
				return
			}
			uni.showLoading({
				title: '上传中...'
			})
			try {
				const file = await uploadFile(success.tempFilePaths[0])
				this.imgs = file.uri;
				console.log(file.url)
				uni.hideLoading()
			} catch (e) {
				this.$toast({
					title: '上传失败，请稍后再试'
				})
				uni.hideLoading()
			}
		
		},
		
		submit(){
			if (!this.name) return this.$toast({
			    title: '请填写门店名称'
			});
			if (!this.contact) return this.$toast({
			    title: '请填写联系人'
			});
			if (!this.mobile) return this.$toast({
			    title: '请填写联系电话'
			});
			if (!this.price) return this.$toast({
			    title: '请填写单价'
			});
			if (!this.bili) return this.$toast({
			    title: '请填写分成比例'
			});
			if (Number(this.bili)<0) return this.$toast({
			    title: '分成比例不能小于0'
			});
			if (Number(this.bili)>1) return this.$toast({
			    title: '分成比例不能大于1'
			});
			if (!this.province || !this.city || !this.district) return this.$toast({
			    title: '请选择省市区'
			});
			if (!this.address || !this.longitude || !this.latitude) return this.$toast({
			    title: '请填写详细地址'
			});
			if(this.imgs == '../../static/add.png'){
				this.$toast({
					title: '请上传门店logo'
				})
				return
			}
			let image = '';
			image = this.imgs.split(baseimgURL)[1]
			updateShop({
			   id:this.id,
			   name:this.name,
			   contact:this.contact,
			   mobile:this.mobile,
			   price:this.price,
			   bili:this.bili,
			   province:this.province,
			   city:this.city,
			   district:this.district,
			   address:this.address,
			   longitude:this.longitude,
			   latitude:this.latitude,
			   image:image
			}).then(res => {
				this.$toast({
					title: '操作成功'
				})
				setTimeout(function() {
					uni.navigateBack({
						delta:2
					})
				}, 1000);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
.boxes {
	.box {
		padding: 25rpx 35rpx;
		border-bottom: 1px solid #eee;
		
		input {
		    width: 60%;
			font-size: $-font-size-md;
		}
	}
	.bordernone {
		border: none;
		.addimg {
			width: 130rpx;
			height: 130rpx;
		}
	}
}
</style>
